<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
			canvas {
				border: 1px solid gold;
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #333;
			}
			
			#nav li {
				float: left;
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #000;
				color: #ddd;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">首页</span></a>
					</li>


					<li>
						<a href="boom.html"><span class="cn">LED时钟</span><span class="en">LED时钟</span></a>
					</li>
					<li>
						<a href="pingBao.html"><span class="cn">屏保弹跳</span><span class="en">屏保弹跳</span></a>
					</li>


					<li>
						<a href="TIji.html"><span class="cn">太极运动</span><span class="en">太极运动</span></a>
					</li>


					<li>
						<a href="shuaiWei.html"><span class="cn">摆尾效果</span><span class="en">摆尾效果</span></a>
					</li>
					
					<li>
						<a href="shadow.html"><span class="cn">阴影效果</span><span class="en">阴影效果</span></a>
					</li>
					
					<li>
						<a href="tanTanTan.html"><span class="cn">小球的弹跳</span><span class="en">小球的弹跳</span></a>
					</li>


					<li>
						<a href="house.html"><span class="cn">Canvas小房子</span><span class="en">Canvas小房子</span></a>
					</li>
				</ul>
			</div>
		<canvas id="myCanvas" width="800px" height="800px"></canvas>
		<script type="text/javascript">
//			获取画布
		  var canvas = document.getElementById("myCanvas");
//		  创建画笔
		  var ctx = canvas.getContext("2d");
		  var img = new Image();
		  img.src="js/22t58PICRgd_1024.jpg";
		  img.onload = function(){
		  	ctx.drawImage(this,0,0,1300,800);
		  
		  ctx.fillStyle = "whitesmoke";
		  ctx.fillRect(60,100,250,250);
		  ctx.fillStyle = "greenyellow";
		  ctx.fillRect(200,260,60,84);
		  ctx.fillStyle = "antiquewhite"
		  ctx.fillRect(70,130,60,60);
		  ctx.fillStyle = "red";
		  ctx.fillRect(80,140,17,17);
		  ctx.fillStyle = "red";
		  ctx.fillRect(105,140,17,17);
		  ctx.fillStyle = "red";
		  ctx.fillRect(80,160,17,17);
		  ctx.fillStyle = "red";
		  ctx.fillRect(105,160,17,17);
		  ctx.moveTo(200,10);
		  ctx.lineTo(330,100);
		  ctx.lineTo(40,100);
		  ctx.lineTo(200,10);
		  ctx.fillStyle = "red";
		  ctx.fill();
		  ctx.stroke();
		  ctx.beginPath();
		  ctx.arc(500,200,30,0,2 * Math.PI);
		  ctx.fillStyle = "red";
		  ctx.fill();
		  ctx.closePath();
		  ctx.stroke();
		  ctx.beginPath();
		  ctx.arc(245,296,7,0,2 * Math.PI);
		  ctx.fillStyle = "red";
		  ctx.fill();
		  ctx.beginPath();
		  ctx.moveTo(500,230);
		  ctx.lineTo(500,370);
		  ctx.closePath();
		  ctx.stroke();
		  ctx.beginPath();
		  ctx.arc(800,0,150,0.5*Math.PI,Math.PI);
		  ctx.shadowBlur = 60;
		  ctx.shadowColor = "#FFD700"
		  ctx.lineTo(800,0)
		  ctx.fillStyle = "red";
		  ctx.fill();
		  ctx.closePath();
		  ctx.beginPath();
		  ctx.moveTo(10,300);
		  ctx.lineTo(60,350);
		  ctx.lineTo(60,350);
		  ctx.lineTo(60,300);
		  ctx.fillStyle = "gray";
		  ctx.fill();
		  }
		</script>
	</body>
</html>
